<template>
  <section>
    <el-row style="margin:20px 0;">
      <el-col :span="6">
        <el-row>
          <span style="font-size: 20px">推荐食疗菜谱</span>
        </el-row>
        <el-row style="margin-top:40px;">
          <img style="width:120px;" :src="widget.config.qrcode" />
        </el-row>
      </el-col>
      <el-col :span="18" style="border:1px solid #666">
        <el-row v-for="recipe of widget.data.recipe" :key="recipe.id">
          <el-row><span class="boldFont">◎{{recipe.name}}</span></el-row>
          <el-row style="padding-left:20px;line-height:26px;">
            <span class="boldFont">配料：</span>{{recipe.formula}}
          </el-row>
          <el-row style="padding-left:20px;line-height:26px;">
            <div class="boldFont">制作方法：</div>
            <div v-html="recipe.method"></div>
          </el-row>
          <el-row style="padding-left:20px;line-height:26px;">
            <span class="boldFont">作用：</span>{{recipe.effect}}
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </section>
</template>

<script>
  export default {
    name: "page-fangan-c",
    props: ['reportData','widget', 'showConfDialog'],
    created(){
      if(Object.getOwnPropertyNames(this.widget.data).length < 2){
        this.widget.data.recipe = this.reportData.data.recipe
        this.$emit('done',this.widget.data)
      }
    },
    methods:{
      getType(o){
        return Object.prototype.toString(o)
      }
    }
  }
</script>

<style lang="scss">
  .boldFont{
    font-weight: bold;
  }
</style>
